<template>
	<view class="form-group">
		<block v-for="(item, index) in sendData" :key="index">
			<view class="form-item" :class="{'form-item-hor': item.type == 'select' || item.type == 'radioGroup'}" v-show="!item.isHide">
				<view class="form-item-header" v-if="item.type !== 'search'">{{ item.label}}：</view>
				<view class="form-item-body">
					<block v-if="item.type == 'select'">
						<picker :value="item.index" :range="item.options" range-key="label"
							@change="bindPickerChange($event, item.field)">
							<view class="select">
								<view class="selected">
									{{item.value | getDictLabel(item.options, 'value', 'label') || '请选择'}}
								</view>
								<view class="select-icon">
									<uni-icons type="arrowdown" size="22" color="#c4c4c4" />
								</view>
							</view>
						</picker>
					</block>
					<view v-else-if="item.type == 'addr'" class="card card-address">
						<textarea v-model="item.value" class="card-content" placeholder="请输入或选择定位获取位置信息">
						</textarea>
						<view class="card-icon" @tap="openMap">
							<image class="icon" src="@/static/icon/iv_location.png"></image>
						</view>
					</view>
					<radio-group v-else-if="item.type == 'radioGroup'" class="radio-group" @change.stop.prevent="radioChange($event, item)">
						<label class="radio-item" v-for="(radio, index) in item.options" :key="index">
							<view class="radio-item-header">
								<radio :value="radio.value" :checked="radio.value === item.value" />
							</view>
							<view class="radio-item-body">{{ radio.label }}</view>
						</label>
					</radio-group>
					<view v-else-if="item.type == 'upload'" class="list list-p">
						<view class="list-group">
							<view class="list-item" v-for="(baseImage, index) in item.images" :key="index">
								<view class="card card-a" @tap="viewPic(item,index)">
									<view class="card-header">
									</view>
									<view class="delete" @tap.stop.prevent="delPic(item,index)">
										<image class="icon" mode="aspectFit" src="@/static/icon/delete-icon.png">
										</image>
									</view>
									<view class="card-body">
										<image class="icon" mode="aspectFit" :src="baseImage"></image>
									</view>
								</view>
							</view>

							<view class="list-item">
								<view class="card card-a upload" @tap="getPic(item)">
									<view class="card-body">
										<image class="icon" mode="aspectFit" src="@/static/icon/iv_pic_add.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>

					<textarea 
						v-else 
						v-model="item.value" 
						maxlength="250" 
						class="form-control form-control-area">
					</textarea>
					
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import { deepClone ,mergeUrls,getBaseImages, previewImage, chooseImage} from '@/util/util.js';
	import { pathToBase64, base64ToPath } from '@/util/mmmm-image-tools/index.js';
	import configUrl from '@/util/url.js';
	export default {
		props: {
			value: {
				type: Array,
				default: () => {
					return [];
				}
			}

		},
		data() {
			return {
				sendData: []
			}
		},
		methods: {
			bindPickerChange(e, field) {
				let index = e.detail.value;
				let select = this.sendData.find(item => item.field == field);
				
				select.index = index;
				
				if (!select.options[index]) {
					return
				}
				
				select.value = select.options[index]['value'];
			},
			openMap() {
				let address = this.sendData.find( item => item.field == 'address')
				
				
				let params = {
					gdx: address.gdx,
					gdy: address.gdy,
					type: "GET"
				}

				let url = mergeUrls('/pages/map/index', params);

				uni.navigateTo({
					url: url
				});
			},
			getLocationData({latitude, longitude, address}) {
				let addr = this.sendData.find( item => item.type == 'addr');
				
				addr.value = address;
				addr.lnglats = `${longitude} ${latitude}`;
			},
			radioChange(e, item) {
				let val = e.target.value;
			 	
			 	item.value = val;
				
				this.sendData.forEach( item => {
					if(item.field == 'reason' || item.field == 'remark') {
						item.isHide = (val === '0');
					}
				})
			},
			async getPic(obj) {
				let res = await chooseImage().catch((err) => {});
				
				if(res) {
					let tempFilePaths = res.tempFilePaths.slice(0);
					
					obj.images = obj.images.concat(tempFilePaths);
					
					let baseImages = await getBaseImages(tempFilePaths);
					
					obj.baseImages = obj.baseImages.concat(baseImages);
				}
				
				
			},
			delPic(obj, index) {
				obj.images.splice(index, 1);
				obj.baseImages.splice(index, 1);
			},
			viewPic(obj, index) {
				previewImage({
					urls: obj.images,
					current: index
				})
			},
			send() {
				this.$emit('input', this.sendData);
			}
		},
		watch: {
			value: {
				handler(newVal) {
					this.sendData = newVal.slice(0);
				},
				deep: true
			}
		},
		created() {
			this.sendData = this.value.slice(0);

			uni.$on('receiveLocationData', this.getLocationData);
		},
		mounted() {},
		destoryed() {
			uni.$off('receiveLocationData');
		}
	}
</script>

<style lang="scss">
	.form-group {
		padding: 0rpx 30rpx;

		.form-item {
			margin-bottom: 30rpx;

			.form-item-header {
				margin-bottom: 20rpx;
				padding: 13rpx 0rpx 13rpx 0rpx;
				font-size: 28rpx;
				line-height: 120%;
				color: #5d5d5d;
			}

			.form-item-body {
				padding: 0rpx 0rpx 0rpx 0rpx;

				.form-control-static {
					min-height: 200rpx;
					padding: 20rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					line-height: 120%;
					background-color: #ececec;
					box-sizing: border-box;
				}

				.form-control {
					width: 100%;
					font-size: 24rpx;
					border-radius: 10rpx;
					line-height: 120%;
					box-sizing: border-box;
					border: 1px solid #c4c4c4;
					height: 56rpx;
					padding: 6rpx 16rpx;

					&.form-control-area {
						height: 200rpx;
						padding: 20rpx;
					}
				}
			}

			&.form-item-hor {
				display: flex;

				.form-item-header {
					width: 140rpx;
					box-sizing: border-box;
					margin-bottom: 0rpx;
				}

				.form-item-body {
					padding: 0rpx 0rpx 0rpx 0rpx;
					width: calc(100% - 140rpx);
					box-sizing: border-box;
				}
			}

			
		}
	}



	.select {
		border: 1rpx solid #c4c4c4;
		border-radius: 10rpx;
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.selected {
			padding: 12rpx 52rpx 12rpx 16rpx;
			font-size: 24rpx;
			line-height: 32rpx;
			color: #5d5d5d;
		}

		.select-icon {
			width: 52rpx;
			height: 52rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.search-wrap {
		padding: 10rpx 0rpx;
	}

	.search {
		display: flex;
		justify-content: space-between;

		.search-control {
			width: calc(100% - 160rpx);
			padding: 18rpx;
			font-size: 24rpx;
			line-height: 32rpx;
			border: 1rpx solid #f29004;
			border-radius: 10rpx;
		}

		.search-btn {
			width: 100rpx;
			padding: 20rpx 0rpx;
			margin: 0rpx;
			font-size: 24rpx;
			line-height: 32rpx;
			background-color: #f29004;
			color: #ffffff;
		}
	}

	.card {}

	.card-address {
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.card-content {
			height: 120rpx;
			margin: 0rpx 100rpx 0rpx 0rpx;
			padding: 20rpx;
			font-size: 24rpx;
			border-radius: 10rpx;
			line-height: 120%;
			box-sizing: border-box;
			border: 1px solid #c4c4c4;
		}

		.card-icon {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			margin: 20rpx 0rpx 20rpx 10rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}
	}

	.card-a {
		width: 223rpx;
		margin: 0rpx auto;
		border-radius: 5rpx;
		border: 1rpx solid #a2a2a2;
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.card-body {
			height: 143rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}

		&.upload {
			border: none;
		}

		.card-header {
			width: 100%;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			background-color: #000000;
			opacity: 0.3;
			z-index: 2;
		}

		.delete {
			width: 31rpx;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 3;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 20rpx;
				height: 20rpx;
			}
		}

	}

	.list {
		&.list-p {
			.list-group {
				display: flex;
				flex-wrap: wrap;

				.list-item {
					margin-bottom: 20rpx;
					width: 33.33%;
				}
			}
		}

		&.list-types {
			width: 600rpx;
			background-color: #ffffff;

			.list-group {
				padding: 20rpx 0rpx 0rpx;

				.list-item {
					margin-bottom: 10rpx;
					position: relative;
					top: 0rpx;
					left: 0rpx;

					&:after {
						content: '';
						background-color: #999;
						opacity: 0.5;
						height: 1rpx;
						position: absolute;
						right: 20rpx;
						bottom: 0rpx;
						left: 20rpx;
					}

					.list-item-btn {
						padding: 13rpx 20rpx;
						font-size: 28rpx;
						line-height: 120%;
						color: #5d5d5d;
					}
				}
			}
		}
	}

	
	.radio-group{
		display: flex;
		padding: 6rpx 10px;
		.radio-item{
			display: flex;
			width: 50%;
			align-items: center;
			.radio-item-header{
				
			}
			.radio-item-body{
				padding: 0rpx 0rpx;
				font-size: 28rpx;
				color: #767676;
			}
		}
	}
</style>
